<template>
	<view>
		<view class="content">
			<u-navbar :fixed="false" title="关于" :autoBack="true" :safeAreaInsetTop="true" leftIconColor="#fff">
			</u-navbar>

			<view class="content_main">
				<u-notify ref="uNotify"></u-notify>

				<view class="ModuleCard x-c" v-for="item in ModuleData" :key="item.ID" @click="OpenPath(item)"
					:style="{ 'background-image': 'url(' + item.Image + ')' ,'color' : item.ID != 0 ? '#fff' :'#333'}">
					{{item.TitleText}}
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				showNotice: false,
				ModuleData: [{
					TitleText: '软件介绍',
					Image: '/static/image/Img/introduce.png',
					Path: 'MineAbout_WebView',
					ID: 0
				}, {
					TitleText: '帮助教程',
					Image: '/static/image/Img/Help.png',
					Path: 'MineAbout_WebView',
					ID: 1
				}, {
					TitleText: '版本记录',
					Image: '/static/image/Img/His1.png',
					ID: 2
				}, ],
			};
		},
		methods: {
			OpenPath(data) {

				let Path = data.Path;


				if (this.$utils.isEmpty(Path)) {
					return this.$refs.uNotify.show({
						top: 0,
						type: 'error',
						color: '#fff',
						bgColor: '#ef870f',
						message: '模块暂未开通',
						duration: 1000 * 1.5,
						fontSize: 20,
						safeAreaInsetTop: false
					})
				};
				uni.navigateTo({
					url: Path + '?ID=' + data.ID
				})
			},
		}
	}
</script>

<style lang="scss">
	.content_main {
		padding: 16rpx;
		position: relative;

		.u-transition {
			position: absolute !important;
			top: 0 !important;
		}

		// 模块盒子样式
		.ModuleCard {
			width: 100%;
			min-height: 200rpx;
			box-shadow: 0 0 12px -7px #000;
			// background-color: pink;
			background-repeat: no-repeat;
			background-size: cover;
			border-radius: 16rpx;
			font-size: 40rpx;
			font-weight: 600;
			letter-spacing: 8rpx;
			margin-bottom: 20rpx;
		}
	}
</style>